<script setup>
defineProps({
  item: {
    typeof: Object,
    default: () => {}
  }
})
const emit = defineEmits(['itemClick'])
function handleGoodclick(item) {
  emit('itemClick', item)
}
</script>

<template>
  <view class="grid-item" @click="handleGoodclick(item)">
    <!-- #ifndef H5 -->
    <image
      class="image"
      :lazy-load="true"
      :src="item.show.img"
      mode="widthFix"
    ></image>
    <!-- #endif -->

    <!-- #ifdef H5 -->
    <img class="image" v-lazy="item.show.img" />
    <!-- #endif -->

    <view class="title">{{ item.title }} </view>
    <view class="info"
      ><text class="price">￥{{ item.price }}</text>
      <image
        class="icon"
        src="../../../../static/images/common/favor.png"
      ></image>
      <text class="favor">
        {{ item.cfav }}
      </text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.grid-item {
  padding: 5px;
}
.image {
  width: 100%;
  border-radius: 20rpx;
}
.info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.title {
  font-size: 20rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon {
  width: 40rpx;
  height: 40rpx;
}
.price {
  margin-right: 20rpx;
  color: rgb(205, 131, 144);
}
</style>
